<template>
  <div>
    <el-button type="primary"  @click="anditemAdd">增加商品</el-button>
      <div class="box2">
        <download-excel :data="items" name="数据表" :fields="json_field">
          <el-button type="primary">导出excel</el-button>
        </download-excel>
      </div>

    <!--    列表页-->
    <el-table
      :data="items"
      height="600"
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="name"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格">
        <template slot-scope="scope">
          <el-tag>
            {{scope.row.price}}元
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="desc"
        label="描述">
        <template slot-scope="scope">
          <el-tooltip popper-class="item" effect="dark"  placement="top-start">
            <div slot="content"class="item">
            {{scope.row.desc }}
            </div>
          <div>
            {{scope.row.desc ? (scope.row.desc.length>10? scope.row.desc.substr(0,10)+'...':scope.row.desc) :'暂无描述'}}
          </div>
            </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        prop="store"
        label="库存">
        <template slot-scope="scope">
          <el-tag>
            {{scope.row.store}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="sale"
        label="销量">
        <template slot-scope="scope">
          <el-tag :color="scope.row.sale>500?'red':'green'">
            {{scope.row.store}}
          </el-tag>
        </template>
      </el-table-column>



      <el-table-column
        prop="thumb"
        label="分类图篇">
        <template slot-scope="scope">
          <div>
            <img width="100px" :src="scope.row.thumb">
          </div>
        </template>
      </el-table-column>
      <!--    动态的书渲染-->
      <!--    结合文档好好看看  -->

      <el-table-column
        prop="createAt"
        label="上架时间">
        <template slot-scope="scope">
          {{dayjs(scope.row.createAt).format('YYYY-MM-DD')}}
        </template>
      </el-table-column>

      <el-table-column
        prop="onOff"
        label="上下架  ">
        <template slot-scope="scope">
          <el-tag :color="scope.row.onOff?'green':'#f56c6c'">
            {{scope.row.onOff?'启动':'禁用'}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini"type="primary" @click="Revise(scope.row.id)">编辑</el-button>
          <el-button size="mini"type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    列表页-->
<!--    分页-->
    <el-pagination
      background
      layout="prev, pager, next,jumper,sizes"
      :current-page="current"
      :page-size="pageSize"
      @size-change="sizeChange"
      @current-change="currentChange"
      :total="total">
    </el-pagination>
    <!--    分页-->
  </div>
</template>
<script>
import { commodity, del } from '@/api'
import dayjs from 'dayjs'
import { Message, MessageBox } from 'element-ui'
export default {
  name: "cate.vue",
  data() {
    return {
      items:[],//新增获取全部数据
      current:1,//当前分页
      pageSize:10,//默认十条
      total:0,
      // 导出excel的标题
      json_field:{
        商品:'id',
        商品名称:'name',
        价格:'price',
        库存:'store',
        销量:'sale',
        创建时间:'createAt',
        分类id:'cateId',
        描述:'desc',
        上下架:'onOff',
        封面图片:'thumb',
        详情内容:'content'
      }
    }
  },
  methods:{
    dayjs,
    del(id){
      //这个删除的接口是和商品列表是公用的
      //删除商品之前弹出确定框
      MessageBox.confirm('此操商品永久删删除该分类，是否执行？','提示',{
        callback:action => {
          if (action==='confirm'){
            //点击确认按钮执行删除
            del(id).then(res=>{
              console.log(res)
              // debugger
              if(res.data.code===200){
                // 删除成功
                Message({
                  type:'success',
                  message:res.data.msg,
                  onClose:()=>{
                    关闭后刷新页面
                    this.$route.go(0)
                  }
                })
              }else {
                Message({
                  type:'error',
                  message:res.data.msg
                })
              }
            })
          }
        }
      })
    },
    Revise(id){
      this.$router.push({
        path:'/renew',
        query:{
          id
        }
      })
      //增加导航路径
      this.$store.commit('ADD_TABS',{
        label:'修改商品',
        paht:'/renew'
      })
    },
    anditemAdd(){
      //点击增加跳转到增加路由
      this.$router.push('/Increase')
      this.$store.commit('ADD_TABS',{
        label:'增加商品',
        paht:'/Increase'
      })
    },
    sizeChange(size){
      // 分页一一页改变多少调回调
      this.pageSize=size
      this.commodity()
    },
    currentChange(current){
      //改变页码得回调
      this.current=current
      this.commodity()
    },
    commodity(){
      // 发送商品请求getList
      commodity(
        {
          page:this.current,
          pageSize:this.pageSize
        }
      ).then(res=>{
        if (res.data.code===200){
          this.items=res.data.data.lists
          this.total=res.data.data.total
        }
      })
    },
  },
  created () {
    //请求接口封装后调用
    this.commodity()//商品管理请求
  },
}
</script>

<style lang="scss" scoped>
.item{
  width: 200px;
}
.box2{
  display: flex;
  flex-direction: row-reverse;
}
</style>
